<template>
    <div class="guess">
        <p class="title">
            <img src="" alt="">
            <span>猜你喜欢</span>
        </p>
        <div class="content">
            <ul class="listBox">
                <li :class="index==0?'active item':'item'">
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/fc03362c322e53beecaf9441ea97ffeb.jpg" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/7c53ac93faea707275d0760bd91d1dc7.png" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="	https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                </li>
                <li :class="index==1?'active item':'item'">
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/4605351c7b359f53d1fe4fe39a8a1999.png" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/fc03362c322e53beecaf9441ea97ffeb.jpg" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/7c53ac93faea707275d0760bd91d1dc7.png" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="	https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                </li>
                <li :class="index==2?'active item':'item'">
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/4605351c7b359f53d1fe4fe39a8a1999.png" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/7c53ac93faea707275d0760bd91d1dc7.png" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="	https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                </li>
                <li :class="index==3?'active item':'item'">
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/fc03362c322e53beecaf9441ea97ffeb.jpg" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="https://yanxuan-item.nosdn.127.net/7c53ac93faea707275d0760bd91d1dc7.png" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                    <router-link to="">
                        <img width="190" height="190" src="	https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg" alt="">
                        <p class="txt">梨皮朱泥三绝清代小</p>
                        <p class="price">￥76.00</p>
                    </router-link>
                </li>
                <span class="last" @click="last"></span>
                <span class="next" @click="next"></span>
            </ul>
            <ul class="dot">
                <li :class="index==0?'active':''"></li>
                <li :class="index==1?'active':''"></li>
                <li :class="index==2?'active':''"></li>
                <li :class="index==3?'active':''"></li>
            </ul>
        </div>
    </div>
</template>

<script>
export default{
    name:"GuessView",
    data(){
        return{
            index:0,
        }
    },
    methods:{
        last(){
            this.index= this.index-1<0?0:this.index-1;
            console.log(this.index);
        },
        next(){
            this.index= this.index+1>=3?3:this.index+1;
            console.log(this.index);
        }
    }
}
</script>

<style lang="scss" scoped>
.guess{
    width:100%;
    height:460px;
    background:#fff;
    .content{
        position:relative;
    }
    .dot{
        width:100%;
        text-align:center;
        position:absolute;
        bottom:-60px;
        li:nth-child(1){
            margin:0;
        }
        li.active{
            background:#27BA9B;
        }
        li{
            display:inline-block;
            width:12px;
            height:12px;
            background:rgba(0,0,0,.2);
            border-radius:50%;
            margin-left:12px;
            router-link{
                width:240px;
                height:289px;
            }
        }
    }
    .title{
        font-size:19px;
        padding:0 0 0 17px;
        height:80px;
        line-height: 80px;
    }
    .listBox{
        height:290px;
        // padding:0 40px;
        position:relative;
        .item{
            opacity:0;
            transition: .8s;
            width:100%;
            background:#fff;
            display:flex;
            justify-content: space-around;
            align-items: center;
            position:absolute;
            top:0;
            box-sizing: border-box;
            padding:0 20px;
            img{
                padding:20px;
            }
            .txt{
                width:160px;
                height:22px;
                padding:0 40px;
                font-size:15px;
                color:#656565;
                text-align:center;
                line-height:22px;
            }
            .price{
                width:240px;
                height:22px;
                text-align:center;
                line-height:22px;
                font-size:16spx;
                color:#CE4443;
                margin-top:15px;
            }
        }
        li.active{
            opacity: 1;
        }
        .last{
            display:block;
            width:30px;
            height:30px;
            background:#000;
            position: absolute;
            z-index:3;
            top:50%;
            left:15px;
            margin-top:-15px;
            cursor:pointer;
        }
        .next{
            display:block;
            width:30px;
            height:30px;
            background:#000;
            position: absolute;
            z-index:3;
            top:50%;
            right:25px;
            margin-top:-15px;
            cursor:pointer;
        }
    }
}
</style>